<template>
  <!-- 全局文件上传组件 -->
  <div class="upload">
    <input
      class="up-input"
      ref="filElem"
      type="file"
      multiple
      :accept="accept"
      @change="handleInputChange"
    />
  </div>
</template>
<script>
import $bus from "@/utils/bus";

export default {
  name: "upload",
  props: {},
  data() {
    return {
      accept: "*"
    }
  },
  mounted() {
    $bus.$on("@/utils/upload.getFile", (accept = "*") => {
      this.accept = accept
      this.$refs.filElem.value = "";
      this.$nextTick(() => { this.$refs.filElem.dispatchEvent(new MouseEvent("click")) });
    });
  },
  methods: {
    // 文件选择回调
    handleInputChange(e) {
      // console.log("handleInputChange => ", e);
      const files = e.target.files;
      // console.log("files => ", files);
      $bus.$emit("@/utils/upload.getFile.success", files);
      this.$refs.filElem.value = null;
    }
  }
}
</script>
<style lang="scss" scoped>
.upload {
  .up-input {
    display: none;
  }
}
</style>
